<template>
  <div class="gl_contentBox gl_heightFull" style="padding: 0">
    <!-- <div class="gl_title">创建店铺</div> -->
    <el-form ref="Api_POST_CreateStoreInput" v-loading="loading" :model="Api_POST_CreateStoreInput" :rules="Api_POST_HotelCreateDto_Rules" label-width="100px" style="padding:20px 30px">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="店铺名称" prop="name">
            <el-input v-model="Api_POST_CreateStoreInput.name" placeholder="请输入" type="text" maxlength="25" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4.8">
          <div class="personalUserInfo_img_wrap">
            <el-form-item label="店铺LOGO" prop="logoUrl">
              <el-input v-show="false" v-model.trim="Api_POST_CreateStoreInput.logoUrl" />
              <photo-cropper-dialog
                ref="photoCropper"
                class="gl_dialog_TitleLine"
                auto-crop-width="300px"
                auto-crop-height="300px"
                :fixed-number="[445, 200]"
                :enlarge="1"
                @photoCropperSave="photoCropperSave"
              />
              <div class="upload_game_img" @click="openPhotoCropper">
                <img v-if="Api_POST_CreateStoreInput.logoUrl" class="show_img" :src="getStaticPhotoUrl(Api_POST_CreateStoreInput.logoUrl)" @error="errorPhoto">
                <i v-else class="el-icon-plus" />
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="margin-top:53px">
            <p class="tip_info_style">图片尺寸：200*90像素</p>
            <p class="tip_info_style">图片格式：jpg; png; jpeg</p>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="routeBox">
        <el-col :span="24" class="form_item" style="height:auto">
          <el-form-item label="二级域名" prop="route">
            <el-input v-model.trim="Api_POST_CreateStoreInput.route" placeholder="请输入" style="margin-right:10px;margin-bottom:5px">
              <template slot="prepend">{{ prefixRoute }}</template>
              <!-- 平台直接访问会带有_plat标记  并且有平台c端头部底部；cms嵌入不带有_plat 不会显示平台c端头部底部； -->
              <template slot="append">{{ ( user.tenantId ? '_' + user.tenantId : '') + '_plat' }}</template>
            </el-input>
            <el-button type="primary" @click="handleCopy( prefixRoute + Api_POST_CreateStoreInput.route + (user.tenantId ? '_' + user.tenantId: '') + '_plat' )">复制</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="商城状态" prop="statusCode">
            <el-radio-group v-model="Api_POST_CreateStoreInput.statusCode">
              <el-radio label="Open">开启</el-radio>
              <el-radio label="Closed">关闭</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:60px">
        <el-col :span="24" style="text-align:center">
          <el-button class="gl_btn" type="primary" :loading="submitLoading" size="mini" @click="save()">提 交</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { SiSTKWMallCreateStoreInput } from '@/lib/form/shoppingmall/swaggerForm';
import { mapState } from 'vuex';
import {
  api_POST_MallStore,
  api_GET_MallStoreCurrent,
  api_PUT_MallStoreId
} from '@/extend/api/shoppingmallswaggerApi/app.js';
import defaultHotelImg from '@/assets/images/face_default.png';
import validator from '@/lib/validate/index.js';
import photoCropperDialog from './photoCropperDialog';
import { CopyData } from '@/lib';
export default {
  components: {
    photoCropperDialog
  },
  data () {
    return {
      defaultHotelImg: defaultHotelImg,
      Api_POST_CreateStoreInput: new SiSTKWMallCreateStoreInput(),
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`, // 图片上传地址
      // 二级域名路由前缀
      prefixRoute: '',
      mallId: '',
      storeId: '', // 店铺id
      baseUrls: window.location.origin + window.location.pathname,
      photoCropperOption: {
        img: '',
        autoCropWidth: '213px',
        autoCropHeight: '200px',
        enlarge: 1,
        fixedNumber: [213, 200]
      },
      Api_POST_HotelCreateDto_Rules: {
        logoUrl: [
          { required: true, message: '请上店铺LOGO照片', trigger: 'blur' }
        ],
        name: [
          validator.required('店铺名称不能为空')
        ],
        route: [
          validator.required('店铺地址不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkRoute(value, '店铺地址格式错误，格式限制字母、数字、-'));
            },
            trigger: 'blur'
          }
        ],
        statusCode: [validator.required('商城状态不能为空', 'change')]
      },
      submitLoading: false,
      loading: false
    };
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  created() {
    this.prefixRoute = `${location.origin}/mall.html#/home/`;
    this.mallId = this.$route.params.id || '';
    this.Api_POST_CreateStoreInput.statusCode = 'Open';
    this.api_GET_MallStoreCurrent();
  },
  methods: {
    // 获取当前用户店铺信息
    api_GET_MallStoreCurrent() {
      this.loading = true;
      api_GET_MallStoreCurrent({ IncludeStatus: true }).then(res => {
        if (res) {
          this.storeId = res.id || '';
          CopyData(res, this.Api_POST_CreateStoreInput);
        }
        this.loading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
        this.loading = false;
      });
    },
    // 提交
    save() {
      const _this = this;
      this.$refs.Api_POST_CreateStoreInput.validate(valid => {
        this.submitLoading = true;
        if (valid) {
          if (this.storeId) {
            api_PUT_MallStoreId(this.storeId, this.Api_POST_CreateStoreInput).then(res => {
              this.$message({
                message: '更新成功',
                type: 'success'
              });
              _this.submitLoading = false;
              this.api_GET_MallStoreCurrent();
            }, error => {
              _this.submitLoading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          } else {
            api_POST_MallStore(this.Api_POST_CreateStoreInput).then(res => {
              this.$message({
                message: '创建成功',
                type: 'success'
              });
              _this.submitLoading = false;
              // 控制左侧导航是否可点击状态
              this.$store.dispatch('permission/setRouterDisable', { Mall: false });
              this.$store.commit('permission/SET_STOREID', res.id); // 控制道馆系统内的菜单
              this.api_GET_MallStoreCurrent();
            }, error => {
              _this.submitLoading = false;
              const _msg = error.error.message || error.message;
              this.$message({ type: 'error', message: _msg });
            });
          }
        } else {
          this.submitLoading = false;
          return false;
        }
      });
    },
    // 复制按钮
    handleCopy(data) {
      const url = data;
      const oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand('Copy'); // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      });
      oInput.remove();
    },
    // 获取静态文件
    getStaticPhotoUrl (relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 点击保存照片裁剪窗口
    photoCropperSave (fileUrl) {
      this.$set(this.Api_POST_CreateStoreInput, 'logoUrl', fileUrl.tempUrl);
    },
    // 点击打开照片裁剪窗口
    openPhotoCropper () {
      this.$refs.photoCropper.open(this.Api_POST_CreateStoreInput.logoUrl);
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    }
  }
};
</script>

<style lang="scss" scoped>
  .gl_title{
    font-size: 16px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    line-height: 50px;
    border-bottom: 1px solid #EBEBEB;
    padding-left: 24px;
  }
  .tip_info_style {
    // padding: 0 10px 0 30px;
    font-size: 14px;
    color: rgba(0,0,0,0.65);
  }
  .personalUserInfo_img_wrap .el-form-item__error {
    padding-left: 10px;
  }
  .upload_game_img.no_pointer {
    cursor: default;
  }
  .upload_game_img {
    width: 200px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 20px;
    border: 1px dotted #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
  }
  .upload_game_img .show_img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
    vertical-align: middle;
  }
</style>
<style>
  .routeBox .el-input-group{
    width: auto;
  }
  .routeBox .el-input__inner{
    width: 240px;
  }
</style>
